<template>
  <div class="index-body">
    <!--头部 start-->
    <canter-header></canter-header>
    <!--头部 end-->
    <div class="index-banner">
       <img src="../../assets/img/backGround.png" width="100%" height="100%"/>
    </div>
    <div class="index-con">
      <div class="index-box">
          <h2 class="classify-title">新品上架</h2>
          <ul class="index-ul">
            <li @click="go_zcDetailsPage_btn">
              <img src="../../assets/img/zc1.png"/>
              <div class="index-details">
                  <span class="index-details-title">智齿客服</span>
                  <span class="index-details-into">管理支持</span>
                  <span class="index-details-price"><em>免费</em></span>
              </div>
            </li>
          </ul>
      </div>
    </div>
    <div class="index-footer">
       <p>云商-移动供应链电商平台</p>
    </div>
  </div>
</template>
<script>
  import canterHeader from '../../components/header/canterHeader'
 export default{
     components:{
         canterHeader,
     },
     data(){
         return{

         }
     },
     methods:{
       //点击智齿跳转页面
       go_zcDetailsPage_btn(){
         this.$router.push({path:"/zcService"})
       },
     }
 }
</script>
<style scoped>

  .index-footer{
    height: 80px;
    line-height: 80px;
  }

  .index-footer p{
    text-align: center;
  }

  .index-details-price em{
    display: inline-block;
    padding: 4px 8px;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    background-color: #ff9f08;
    border-radius: 2px;
    font-style: normal;
  }

  .index-details-price{
    margin-top: 7px;
    font-size: 16px;
    color: #ff7636;
  }

   .index-details-into{
     display: block;
     margin-top: 8px;
     height: 15px;
     line-height: 15px;
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: #aaaaaa;
   }

  .index-details-title{
    font-size: 16px;
    line-height: 20px;
    color: #555555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .index-details span{
    display: block;
  }

  .index-details{
    float: left;
  }

  .index-ul li img{
    width: 72px;
    height: 72px;
    float: left;
    margin-right: 15px;
  }

  .index-ul li{
    float: left;
    width: 218px;
    height: 72px;
    padding: 26px 16px;
    overflow: hidden;
    cursor: pointer;
  }
  .index-ul li:hover{
    background: white;
  }


  .index-ul{
    overflow: hidden;
  }

  .classify-title{
    height: 60px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: normal;
    line-height: 60px;
    border-bottom: 1px solid #ddd;
    color: #555555;
  }

  .index-box{
    width: 1000px;
    padding: 0 10px;
    margin: 0 auto;
    overflow: hidden;
  }

  .index-con{
    overflow: hidden;
    width: 100%;
  }

  .index-banner img{
    height: 360px;
    margin: 0 auto;
  }

  .index-banner{
    background: linear-gradient(45deg, #FDC031, #184069);
    height: 360px;
  }


  .index-body{
    padding-top: 80px;
    background: #f5f5f5;
    overflow: hidden;
  }
</style>
